128/2614/10/2026Firmato
Edilnord S.p.A.Sede di Seregno · Via Milano 112L. Brambilla, M. Colombo · 4,5 h · 28 km
4.1.1
Bottoni
Angoli vivi e bordo da 2 px. Il primario è pieno rosso-arancio con testo scuro ed è uno solo per schermata; la struttura è magenta con testo bianco; il secondario è a contorno. Alla pressione il bottone scende di 1 px, come un tasto.
Riposo
Sopra
Focus
Selezionato
Disabilitato
Primario
Struttura
Secondario
Testo
—
Pericolo
—
Gruppo d'azione del rapporto
Le quattro uscite del rapporto firmato, sempre in quest'ordine. Su una bozza il gruppo è disabilitato.
Solo icona
Quadrati, alla misura del bottone; l'etichetta resta per i lettori di schermo.
4.1.2
Campi
Il campo ha il bordo pieno in basso e un filo a sinistra, come nel backoffice di oggi: si legge come una morsettiera, aperta verso il dato. Al focus il bordo diventa magenta.
Interruttore sì/no
Caselle e scelte
Ricerca con risultati in finestra
Scrivi «ma» o «lo» per vedere la finestra dei risultati.
{{ r.nome }}
{{ r.sede }}{{ r.cod }}
{{ r.sede }}{{ r.cod }}
Selezione multipla: i tecnici dell'intervento
{{ t.nome }}
{{ tecniciNota }}
Campo firma · vuoto, firmato, da rifare
Firma qui · cliente
{{ firmaStato }}
Firmato · tecnico · 14/10/2026 16:42
La firma è troppo corta: rifalla
Da rifare
4.1.3
Card, badge, chip, tab
QG-01Quadro generale
Card di contenutoBordo da 1 px, testa con la targhetta, piede con le azioni. Nessuna ombra a riposo.
Card collegata, sopraQuando è un collegamento, al passaggio prende l'ombra netta di 3 px.
Card selezionataBordo magenta raddoppiato.
Badge degli stati del rapporto
BozzaIn corsoFirmatoInviatoInvio fallito
Lo stato non si affida al solo colore: il quadratino è vuoto per la bozza e pieno per gli altri, e la parola c'è sempre.
Chip
MilanoMonza e BrianzaComo
Tab · le schede dell'editor del rapporto
{{ tabTesto }}
4.1.4
Form e moduli
Tre rese, tutte utilizzabili. I dati raccolti dal sito sono nome, email e telefono, per il contatto e il preventivo. Sotto, tutti gli stati del campo.
4.1.5
Stile delle icone
Un insieme solo, al posto dei tre di oggi. Tratto da 2 px su griglia di 24, terminali e angoli vivi, nessun riempimento: lo stesso segno degli schemi elettrici. Le icone prendono il colore del testo che accompagnano.
{{ i.nome }}
4.1.6
Griglia, spazio e raggi
Dodici colonne, come i moduli di una guida DIN; spazio su base 4 px; raggio zero ovunque. La resa compatta si accende sul riquadro, non sul singolo componente: cambia l'opzione «densità» dell'artefatto e i componenti di tutta la pagina si stringono a 32 px; sugli schermi da toccare tornano a 44.
{{ n }}
{{ s.nome }}
4.1.7
Feedback di sistema
Sincronizzazione in attesa
Sei fuori linea: il rapporto è salvato sul telefono e parte appena torna la rete.
Sei fuori linea: il rapporto è salvato sul telefono e parte appena torna la rete.
Rapporto inviato
Il PDF del rapporto 128/26 è partito verso amministrazione@cliente.it.
Il PDF del rapporto 128/26 è partito verso amministrazione@cliente.it.
Manca la firma del cliente
Senza la firma il rapporto resta in bozza e non si invia.
Senza la firma il rapporto resta in bozza e non si invia.
Invio non riuscito
Il server non ha risposto. Il rapporto è salvo; riprova fra qualche istante.
Il server non ha risposto. Il rapporto è salvo; riprova fra qualche istante.
Azione irreversibile
Il tratteggio di sicurezza segna solo ciò che non si può annullare: eliminazioni, sovrascritture, la zona pericolosa del profilo.
Il tratteggio di sicurezza segna solo ciò che non si può annullare: eliminazioni, sovrascritture, la zona pericolosa del profilo.
Bozza salvata alle 16:40
4.1.8
Flussi, stati e avanzamenti
La barra d'avanzamento è la sbarra del marchio: 8 px, rosso-arancio, si riempie a scatti. I passi di un flusso stanno sulla stessa sbarra, magenta quando sono fatti.
- Cliente e sede
- Lavori eseguiti
- Firme
- Invio
Determinato · {{ progPct }}
Indeterminato · generazione del PDF
4.1.9
Icona fluttuante
WhatsApp sul numero aziendale, sempre in basso a destra, una per pagina, sotto i veli. È l'unico colore di terzi del sistema, riprodotto com'è: una deroga dichiarata.
4.1.10
Componenti fermi
Ciò che resta fermo mentre il rapporto scorre: il banner di stato in alto, la barra dei comandi in basso. Fondo pieno e un filo netto verso ciò che scorre.
4.1.11
Navigazione
Percorso
- Rapporti
- Edilnord S.p.A.
- 128/26
Schede fra pagine
Indice di sezioni
La barra laterale è magenta: è struttura. La voce corrente è carbone col filo rosso-arancio. Si richiude a sole icone (64 px); i gruppi si aprono col chevron.
4.2.1 · 4.2.4
Indicatori e data visualization
Rapporti aperti146 in bozza · 8 da firmare
Chiusi nel mese62+9 su settembre
Ore lavorate418di cui 37 straordinarie
Km percorsi2.140media 34 km a intervento
Interventi per tecnico · ottobre 2026
4.2.2 · 4.2.3
Tabelle, filtri, ordinamento, paginazione
| N. | Data | Cliente | Sede | Tecnici | Ore | Stato |
|---|---|---|---|---|---|---|
| {{ r.n }} | {{ r.data }} | {{ r.cliente }} | {{ r.sede }} | {{ r.tecnici }} | {{ r.ore }} | {{ r.stato }} |
{{ conteggio }}
…
4.2.6
Cronologia del rapporto
Il log di un rapportino: chi, che cosa, quando. Il segno si riempie di magenta alla firma e di rosso-arancio all'invio.
- 14/10/2026 · 08:12Creato da L. Brambilla
- 14/10/2026 · 12:30Modificato · lavori eseguiti, materiali
- 14/10/2026 · 16:42Firmato dal cliente e dal tecnico
- 14/10/2026 · 16:45Inviato per email a amministrazione@edilnord.it
Dall'inventario
Tutorial per gli operatori
T-03
Come si raccoglie la firma del cliente
Sei minuti. Dal campo firma all'invio del PDF.
Sei minuti. Dal campo firma all'invio del PDF.
4.3.1 · 4.3.2 · 4.3.3
Livelli e sovrapposizioni
Le sovrapposizioni si staccano con un bordo da 2 px e un'ombra netta, senza sfocatura. Il velo è carbone al 62%.
Icona informativa e tooltip
Chiamata giustificata
Il guasto era a carico dell'impianto del cliente: l'uscita si addebita.
Popover
Edilnord S.p.A.
3 sedi · ultimo intervento 14/10/2026
3 sedi · ultimo intervento 14/10/2026
Modali
{{ modaleTitolo }}
{{ modaleTesto }}
4.4.1
Selezione del testo
Seleziona questa frase: fondo magenta, testo bianco, contrasto 5,24.
4.4.2 Reazione al puntatore · assente: un brand tech-industrial non insegue il mouse4.4.3
Animazioni
Brevi, da 120 a 200 ms, lineari o a scatto come un interruttore; nessun rimbalzo. Con il moto ridotto si fermano.
4.5
Accessibilità
Soglia WCAG 2.2 AA. Ogni inchiostro misurato contro la sua superficie, nelle due luci. Il numero peggiore per il testo normale è 4,57, il testo scuro sul primario rosso-arancio; il bianco sul rosso-arancio (3,60) è ammesso solo per il testo grande e gli elementi d'interfaccia.
| Coppia | Dove | Contrasto | Esito |
|---|---|---|---|
| Aa{{ c.nome }} | {{ c.dove }} | {{ c.r }} | {{ c.esito }} |
I due rossi affiancati stanno a 1,45: non portano mai un'informazione l'uno contro l'altro. Aree di tocco di 44 px dove si tocca; focus visibile da 2 px su ogni elemento attivo.
4.6
Anteprime
Come un elemento si presenta fuori dalla propria pagina. Si riempiono coi dati, non si disegnano; niente sopra l'immagine; un solo bottone pieno nella famiglia.
4.6.1 · Rapporto d'intervento · normale e compatta
{{ r.n }}{{ r.stato }}
4.6.2 · Cliente con le sue sedi
Edilnord S.p.A.3Sedi
Ultimo intervento14/10/2026Rapporti aperti2